<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <script src="../../js/common.js"></script>
  <style>
    .search-style {
      margin-left: 5%;
    }
  </style>
</head>

<body>
  <div style="margin: 20px;"></div>
  <!-- <form class="layui-form" action="">
    <div class="demoTable search-style">
      条件选择：
      <a class="layui-btn1 layui-btn" lay-submit lay-filter="formDemo">全部</a>
      <a class="layui-btn1 layui-btn" lay-submit lay-filter="formDemo">已发布</a>
      <a class="layui-btn2 layui-btn" lay-submit lay-filter="formDemo">失败取消</a>
      <a class="layui-btn4 layui-btn" lay-submit lay-filter="formDemo">进行中</a>
      <a class="layui-btn5 layui-btn" lay-submit lay-filter="formDemo">已完成</a>
      <a class="layui-btn6 layui-btn" lay-submit lay-filter="formDemo">待审核</a>
    </div>
  </form> -->

  <table class="layui-hide" id="test" lay-filter="test" lay-data="{id: 'idTest'}"></table>

  <!-- 工具栏模板： -->
  <script type="text/html" id="toolbarDemo">
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">权限修改</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete" style="background-color:#FF5511;">
          <font color="FFFFFF">删除</font>
        </a>
      </script>

  <script type="text/html" id="barDemo2">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">审核通过</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete" style="background-color:#FF5511;">
          <font color="FFFFFF">敏感词</font>
        </a>
      </script>


  <!-- 显示序号 -->
  <script type="text/html" id="titleTpl">
    {{d.LAY_TABLE_INDEX+1}}
  </script>


  <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
  <script src="../../layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript">

    layui.use('table', function () {
      //得到各种内置组件
      var layer = layui.layer //弹层
        ,
        laypage = layui.laypage //分页
        ,
        laydate = layui.laydate //日期
        ,
        table = layui.table //表格
        ,
        carousel = layui.carousel //轮播
        ,
        upload = layui.upload //上传
        ,
        element = layui.element //元素操作
        ,
        slider = layui.slider //滑块
        ,
        dropdown = layui.dropdown //下拉菜单
        ,
        $ = layui.$

      var table = layui.table;
      let curr;
      let limit;
      var tableIns = table.render({
        elem: '#test',
        id: 'testReload',
        url: "/api/READ/api/my/demand/getAll/list",
        headers: {
          token: localStorage.token
        },
        cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增,
        height: 'full-80',//高度最大化减去差值 ,
        toolbar: '#toolbarDemo',
        page: true, //开启分页
        limit: 10,
        limits: [10, 15, 40, 60],
        request: {
          //这里设置的pageNum与pageSize每次请求时都会传给后端，从而实现layui的自定义分页
          pageName: 'current', //页码的参数名称，默认：page
          limitName: 'pageSize', //每页数据量的参数名，默认：limit
        },
        parseData: function (res) { //res 即为原始返回的数据
          //console.log(res);
          // runType 0 普通 1 加急  payType 0 线下 1 线上
          let list = res.data;
          for (var i = 0; i < list.length; ++i) {

            if (list[i].illegalMsg == null) {
              list[i].illegalMsg = '无'
            }

            if (list[i].runType == 0) {
              list[i].runType = '普通';
            } else {
              list[i].runType = '加急';
            }

            if (list[i].payType == 0) {
              list[i].payType = '线下';
            } else {
              list[i].payType = '线上';
            }

            if (list[i].status == 5) {
              list[i].status = '待审核';
            }
            else if (list[i].status == 2) {
              list[i].status = '违规/取消';
            }
            else {
              list[i].status = '已审核';
            }

          }
          // console.log(list)
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "data": list, //解析数据列表
            "count": res.total //总共条数
          };

        },
        response: {
          statusCode: 200 //规定成功的状态码，默认：0
        },

        cols: [
          [
            {
              field: 'id',
              title: '编号',
              width: '5%',
              fixed: 'left',
              align: 'center',
              templet: '#titleTpl'
            },
            {
              field: 'addressKey',
              width: '14%',
              title: '订单号',
              align: 'center',
            }, {
              field: 'context',
              width: '13%',
              align: 'center',
              title: '内容'
            }, {
              field: 'address',
              width: '10%',
              align: 'center',
              title: '地址'
            }, {
              field: 'illegalMsg',
              title: '违规信息',
              width: '10%',
              align: 'center',
              templet: function (d) {
                if (d.illegalMsg.length >= 4) {
                  return "<p style='color:red;'>" + d.illegalMsg + "</p>"
                }
                return d.illegalMsg;
              }
            } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
            , {
              field: 'status',
              align: 'center',
              width: '6%',
              title: '状态',
            }, {
              field: 'payType',
              title: '支付方式',
              width: '5%',
              align: 'center',
            }, {
              field: 'runType',
              align: 'center',
              width: '5%',
              title: '配送方式',
            }, {
              field: 'createTime',
              align: 'center',
              width: '11%',
              title: '创建时间',
              sort: true
            }, {
              fixed: 'right',
              width: '17%',
              align: 'center',
              toolbar: '#barDemo2'
            }

          ]
        ],
        done: function (res) {
          //如果是异步请求数据方式，res即为你接口返回的信息。
          //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度

        }
      });


      /**
      *   搜索按钮 
      */
      $('.demoTable .layui-btn1').on('click', function () {
        var searchByPhoneValue = $('#searchByPhone')[0].value.replace(/\s*/g, "");
        var searchByEmailValue = $('#searchByEmail')[0].value.replace(/\s*/g, "");
        var condition;

        if (searchByPhoneValue.length != 0 && searchByEmailValue.length != 0) {
          layer.msg('只查询一个条件');
          return;
        }

        tableIns.reload({
          page: {
            curr: 1, //重新从第 1 页开始
          },
          method: 'get',
          contentType: "application/x-www-form-urlencoded",
          where: {
            phone: searchByPhoneValue,
            email: searchByEmailValue
          },
          parseData: function (res) { //res 即为原始返回的数据
            //console.log(res);
            return {
              "code": res.code, //解析接口状态
              "msg": res.msg, //解析提示文本
              "data": res.data, //解析数据列表
              "count": res.total //总共条数
            }
          },
        });
      });



      //监听行工具事件
      table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data, //获得当前行数据
          layEvent = obj.event,
          orderId = data.addressKey //获得 lay-event 对应的值
        console.log(orderId)

        if (layEvent === 'detail') {
          console.log("点击了 审核通过")
          $.ajax({
            type: 'post',
            url: '/api/READ/api/my/demand/admin/ok/' + orderId,
            async: false,
            headers: {
              token: localStorage.token
            },
            success: function (res) {
              console.log(res)
              // if ()
              layer.msg("ok")
            }
          });

        } else {
          layer.msg("ok")
        }
      });
    });
  </script>

</body>

</html>